<template>
  <div class="goodbaseinfo" :style="{backgroundColor:bgc}">
    <div class="top">
      <div class="price">
        <slot name="price"></slot>
      </div>
      <div class="zhe">
        <div class="price_s">
          <s><slot name="price_s"></slot></s>
          
        </div>
        <div class="count_s">
          <span><slot name="count_s"></slot></span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="good_name">
        <p>
          <slot name="good_name"></slot>
        </p>
      </div>
      <div class="r">
        <span>
          <slot name="content_r"></slot>
        </span>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_l">
        <span>
          <slot name="bottom_l"></slot>
        </span>
      </div>
      <div class="bottom_r">
        <span>
          <slot name="bottom_r"></slot>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodBaseInfo",
  props:{
    bgc:{
      type:String,
      default:'#fff'
    }
  }
};
</script>

<style lang="less" scoped>
.goodbaseinfo{
  padding: 10px;
  .top{
    display: flex;
    .price{
      text-align: center;
      font-size: 25px;
      
      font-weight: 700;
    }
    .zhe{
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-left: 5px;
      .price_s{
        flex: 1;
        display: flex;
        align-items: center;
        s{
          color: gray;
        }
      }
      .count_s{
        flex: 1;
        display: flex;
        align-items: center;
        span{
          color: red;
          background-color: salmon;
          display: block;
          padding: 0 10px;
        }
      }
    }
  }
  .content{
    display: flex;
    .good_name{
      flex: 1;
      font-size: 18px;
      font-weight: 600;
    }
    .r{
      width: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        position: relative;
        padding-left: 20px;
      }
      span::before{
        content: '';
        width: 20px;
        height: 20px;
       
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-image: url('~assets/images/icon/search.svg');
        background-size: 100%;
      }
    }
  }
  .bottom{
    display: flex;
    padding:5px 0;
    .bottom_l{
      flex: 1;
    }
    .bottom_r{
      width: 70px;
      text-align: center;
    }
  }
}
</style>